<template>
    <div class="div1">
        <div style="height: 80px; width: 100%;"></div>
            <div style=" width: 1200px; height: 16px; margin: 0 auto; text-align: left; background-color: rgb(247, 247, 247);" >
            <span class="span5">首页&nbsp;>&nbsp;课程购买</span>
            </div>
            <div style="height: 20px;"></div>
        <div class="div2">
            <div style="width: 1200px; height: 300px;  background-color: rgb(255, 255, 255);">
                <div style="height: 25px;"></div>
                <div style="width: 450px; height: 250px; margin-left: 25px;">
                <el-image style="width: 100%; height: 100%" :src=" 'http://101.43.223.224:8765/image/getImageById?id=' + JSON.parse(this.$route.query.roid).courseImg"></el-image>
                </div>
                <div style="width: 470px; height: 63px; margin-left: 500px; margin-top: -250px; background-color: #ffffff;">
                    <div style="display: flex; font-size: 24px;">
                        {{courstData.courseTitle}}
                    </div>
                    <div style="height: 15px;"></div>
                    <div style="width: 470px; height: 20px; display: flex; font-size: 12px; background-color: rgb(255, 255, 255);">
                        {{courstData.courseClick}}人学过 &nbsp;&nbsp; <el-rate></el-rate>
                    </div>
                    <div style="height: 15px;"></div>
                    <div style="width: 470px; height: 37px; background-color: rgb(255, 255, 255);">
                        <!-- <div style="height: 3px;"></div> -->
                        <div style="display: flex; font-size: 28px;">
                            ￥{{courstData.coursePrice}}&nbsp; <button style="border-radius: 50px; background-color: #FF8001; color: #fff; font-size: 16px; border: none;padding-left: 30px;
  padding-right: 30px;">月卡VIP折扣价￥{{courseData}}</button>
                        </div>
                    </div>
                    <div style="height: 25px;"></div>
                    <div style="width: 470px; height: 32px; background-color: rgb(255, 255, 255);">
                         <span style="margin-left: -375px;" >讲师:{{courstData.teacherName}}</span>
                    </div>
                    <!-- <div style="height: 5px;"></div>
                    <div style="width: 237px; height: 24px; border-radius: 50px; background-color: #FF632A;">
                        <div style="text-align: left; font-size: 14px; color: #ffffff;">
                            【福利】&nbsp;送80元购课通用红包&nbsp;>
                        </div>
                    </div> -->
                    <div style="height: 25px;"></div>
                    <div style="width: 470px; height: 45px; background-color: rgb(255, 255, 255);">
                        <div style="float: left;">
                            <el-button style="width: 160px; height: 45px; margin: 0 auto; font-size: 20px; color: #ffffff; border: none; background-color: #FF8000;" @click="vippage(courstData)">会员购买</el-button>
                        </div>
                        <div style="">
                            <el-button style="width: 160px; height: 45px; margin-right: 120px; font-size: 20px; background-color: #ffffff;" @click="paymentpage(courstData)">课程购买</el-button>
                        </div>
                    </div>
                </div>
                <!-- 收藏 -->
                    <div style="margin-left: 1130px; margin-top: -65px;">
                        <button style="cursor: pointer;" @click="handleStarClick()" v-if="this.bookmarkid == 0"><i class="el-icon-star-off"></i></button>
                        <button style="cursor: pointer;" @click="handleStarClick()" v-else><i class="el-icon-star-on" style="color: #FFFF00;"></i></button>
                    </div>
            </div>
            <div style="height: 1px; background-color:rgb(247, 247, 247);"></div>
            <div style="width: 1200px; height: 37px; background-color: #ffffff;"></div>
            <div style="height: 20px; background-color:rgb(247, 247, 247);"></div>
            <div style="width: 265px; height: 1269px; float: right; background-color: rgb(247, 247, 247);">
                <div style="width: 265px; height: 50px; background-color: rgb(255, 255, 255);">
                    <div style="height: 10px;"></div>
                    <div style="font-size: 20px; display: flex; margin-left: 10px;">
                        咨询
                    </div>
                </div>
                <div style="height: 1px;"></div>
                <div style="width: 265px; height: 124px; background-color: rgb(255, 255, 255);">
                    <div style="height: 15px;"></div>
                        <el-image style="width: 36px; height: 36px; margin: 0px 10px -12px 0px;" :src=" 'http://101.43.223.224:8765/image/getImageById?id=' + JSON.parse(this.$route.query.roid).teacherImg"></el-image>
                        <span style="width: 108px; height: 19px; font-size: 14px;">
                            {{courstData.teacherName}}
                            <el-button type="mini" style="width: 60px; height: 28px;" @click="dialogVisible = true">咨询</el-button>
                        </span>
                        <div style="height: 20px;"></div>
                        <div style="font-size: 12px; text-align: left; margin-left: 10px;">
                            {{courstData.teacherInfo}}
                        </div>
                </div>
                <div style="height: 15px;"></div>
                <div style="width: 265px; height: 50px; font-size: 18px; background-color: rgb(255, 255, 255);">
                    <div style="height: 10px;"></div>
                    <div style="font-size: 20px; display: flex; margin-left: 10px;">
                        所属系列课程
                    </div>
                </div>
                <div style="height: 1px;"></div>
                <div style="width: 265px; height: 77px; background-color: rgb(255, 255, 255);">
                  <div style="height: 10px;"></div>
                    <div style="text-align: left; margin-left: 10px; font-size: 12px;margin-right:12px">
                        Tensorflow深度学习从入门到实战
                        人工智能体系课——从0到实战
                        完全零基础入门深度学习
                    </div>
                </div>
                <!-- <div style="height: 15px;"></div> -->
                <!-- <div style="width: 265px; height: 50px; background-color: #ffffff;">
                    <div style="height: 10px;"></div>
                    <div style="font-size: 20px; display: flex; margin-left: 10px;">
                        评价
                    </div>
                </div> -->
                <!-- <div style="height: 1px;"></div> -->
                <!-- <div style="width: 265px; height: 623px; background-color: rgb(255, 255, 255);">
                    <div style="width: 265px; height: 110px; background-color: #ffffff;">
                        <img style="width: 32px; height: 32px; margin-right: 200px; margin-top: 15px;" src="../../assets/微信图片.jpg" alt="">
                        <div style="font-size: 12px; margin-right: 110px; margin-top: -35px;">格格巫</div>
                        <div style="margin-left: 145px; margin-top: -20px;"><el-rate></el-rate></div>
                        <div style="font-size: 12px; margin-right: 40px;">学习111个课时评价</div>
                    </div>
                    <div style="width: 265px; height: 110px; background-color: #ffffff;">
                        <img style="width: 32px; height: 32px; margin-right: 200px; margin-top: 15px;" src="../../assets/微信图片.jpg" alt="">
                        <div style="font-size: 12px; margin-right: 110px; margin-top: -35px;">格格巫</div>
                        <div style="margin-left: 145px; margin-top: -20px;"><el-rate></el-rate></div>
                        <div style="font-size: 12px; margin-right: 40px;">学习111个课时评价</div>
                    </div>
                    <div style="width: 265px; height: 90px; background-color: #ffffff;">
                        <img style="width: 32px; height: 32px; margin-right: 200px; margin-top: 15px;" src="../../assets/微信图片.jpg" alt="">
                        <div style="font-size: 12px; margin-right: 110px; margin-top: -35px;">格格巫</div>
                        <div style="margin-left: 145px; margin-top: -20px;"><el-rate></el-rate></div>
                        <div style="font-size: 12px; margin-right: 40px;">学习111个课时评价</div>
                    </div>
                    <div style="width: 265px; height: 160px; background-color: #ffffff;">
                        <img style="width: 32px; height: 32px; margin-right: 200px; margin-top: 15px;" src="../../assets/微信图片.jpg" alt="">
                        <div style="font-size: 12px; margin-right: 110px; margin-top: -35px;">格格巫</div>
                        <div style="margin-left: 145px; margin-top: -20px;"><el-rate></el-rate></div>
                        <div style="font-size: 12px; margin-right: 40px;">学习111个课时评价</div>
                        <div style="text-align: left; margin-left: 17px; font-size: 14px;">光华老师讲的挺好的，TensorFlow这一块的网课，b站，网易云课堂和慕课网还有腾讯课堂来说，应该都是第一梯队的讲师水平。希望老师能继续输出更多优质的教学内容。</div>
                    </div>
                    <div style="width: 265px; height: 110px; background-color: #ffffff;">
                        <img style="width: 32px; height: 32px; margin-right: 200px; margin-top: 15px;" src="../../assets/微信图片.jpg" alt="">
                        <div style="font-size: 12px; margin-right: 110px; margin-top: -35px;">格格巫</div>
                        <div style="margin-left: 145px; margin-top: -20px;"><el-rate></el-rate></div>
                        <div style="font-size: 12px; margin-right: 40px;">学习111个课时评价</div>
                    </div>
                    <div style="height: 1px; background-color: #e2dede;"></div>
                    <div style="width: 265px; height: 47px; background-color: #ffffff;">
                        <div style="height: 12px;"></div>
                        <div style="margin:  0 auto;">
                            查看更多
                        </div>
                    </div>
                </div> -->
            </div>
            <div class="div4">
                <div style="width: 880px; height: 13420px; margin: 0 auto; font-size: 13px; background-color: rgb(255, 255, 255);">
                    <div style="width: 660px; height: 30px; display: flex;">
                    <h4>适合人群</h4>
                    </div>
                    <div style="width: 880px; height: 20px; font-size: 13px; display: flex;">
                    <p>本课程讲解Tensorflow深度学习的概念和使用方法，适合有一定python语言基础和数据分析基础的学员学习参考。</p>
                    </div><br/>
                    <div style="width: 660px; height: 30px; display: flex;">
                        <h4>课程概述</h4>
                    </div><br>
                    <div style="width: 880px; height: 100px; font-size: 13px; text-align: left; display: flex;">
                        <b>{{courstData.courseInfo}}</b>
                    </div>
                    <div style="width: 880px; height: 2635px;">
                        <img src="../../assets/2.webp" alt="">
                    </div>
                    <div style="width: 880px; height: 2611px;">
                        <img src="../../assets/3.webp" alt="">
                    </div>
                    <div style="width: 880px; height: 2618px;">
                        <img src="../../assets/4.webp" alt="">
                    </div>
                    <div style="width: 880px; height: 2598px;">
                        <img src="../../assets/5.webp" alt="">
                    </div>
                    <div style="width: 880px; height: 2568px;">
                        <img src="../../assets/6.webp" alt="">
                    </div>
                </div>
            </div>
            <div style="height: 15px; background-color:rgb(247, 247, 247);"></div>
            <div style="width: 920px; height: 600px; background-color: rgb(255, 255, 255);">
                <div style="width: 675px; height: 50px;">
                    <div style="font-size: 18px; padding: 15px 15px 0px 15px; display: flex;">
                        学习过该课程的人还学习过：
                    </div>
                </div>
                <div style="height: 1px; background-color:rgb(247, 247, 247);"></div>
                <div style="width: 920px; height: 121px; background-color: rgb(255, 255, 255);" v-for="classicCoursess in classicCourseList" :key="classicCoursess.id">
                    <div style="width: 120px; height: 66px; margin-left: 20px;">
                        <div style="height: 25px;"></div>
                        <img style="width: 120px; height: 66px;" :src=" 'http://101.43.223.224:8765/image/getImageById?id=' + classicCoursess.courseImg " class="img2" />
                    </div>
                    <div style="width: 233px; height: 69px;">
                        <div style="width: 233px; height: 69px; margin-left: 150px; margin-top: -20px; font-size: 16px;" class="div4-2-1">
                            {{ classicCoursess.courseTitle }}
                        </div>
                    </div>
                    <div style="width: 56px; height: 22px; background-color: #FF6B01; margin-left: 845px; margin-top: -40px;">
                        <div @click="local(classicCoursess)" style="padding: 3px 3px 3px 3px; font-size: 12px; color: #ffffff;" class="tiaozhuan" >
                        <!-- <button @click="qew(classicCoursess)"> -->
                            ￥{{ classicCoursess.coursePrice }}
                        <!-- </button> -->
                        </div>
                    </div>
                </div>
            </div>
            <div style="height: 50px; width: 100%;"></div>
            <div style="margin-right: 60%; padding-top: 2%;">
            </div>
        </div>
        <el-dialog :visible.sync="dialogVisible" width="15%">
          <span>教师电话:<i style="color:RGB(100,150,255)">{{courstData.teacherPhone}}</i></span>
        </el-dialog>
    </div>
</template>

<script>
export default {
  name: 'CarsharingRegister', // 修复template标签报错
  data () {
    return {
      dialogVisible: false,
      courstData: {}, // 课程教师基本信息
      courseData: 0, // 用户会员折扣后的课程价格数据
      uid: {}, // 用户信息
      classicCourseList: [],
      bookmarkid: 0
    }
  },
  mounted () {
    this.courstData = JSON.parse(this.$route.query.roid) // 课程信息
    this.uid = JSON.parse(localStorage.getItem('user')).data
    this.selectCourseData()
    // 精品课查询方法
    this.classicCourse()
    this.getUser()
  },

  methods: {
    // 收藏按钮
    handleStarClick () {
      // 判断是否登录
      if (this.uid.id === null || this.uid.id === '') {
        this.$confirm('您还未登录，请问是否登录？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 用户点击了确认按钮，进行登录操作
          // eslint-disable-next-line no-undef
          EventBus.$emit('showLoginDialog', true)
        }).catch(() => {
          // 用户点击了取消按钮，不进行任何操作
        })
      } else {
        // 判断收藏状态 为0则添加收藏 不为0则移除收藏
        if (this.bookmarkid === 0) {
          const formData = new FormData()
          formData.append('uid', this.uid.id)
          formData.append('cid', this.courstData.id)
          this.$axios.post('/bookMark/addBookMark', formData).then((res) => {
            this.bookmarkid = 1
            this.$message({
              message: '已加入收藏',
              type: 'success'
            })
          })
        } else {
          const formData = new FormData()
          formData.append('uid', this.uid.id)
          formData.append('cid', this.courstData.id)
          this.$axios.post('/bookMark/delBookMarkCourse', formData).then((res) => {
            this.bookmarkid = 0
            this.$message({
              message: '已从收藏中移除',
              type: 'warning'
            })
          })
        }
      }
    },
    // 用户课程收藏情况
    getUser () {
      return new Promise((resolve, reject) => {
        this.$axios
          .get('/bookMark/getUser', {
            params: {
              uid: this.uid.id,
              cid: this.courstData.id
            }
          })
          .then((res) => {
            if (res.data.code === 200) {
              this.bookmarkid = res.data.data.data
              resolve() // 执行成功的回调
            }
          })
          .catch(() => {
            // this.myMessage('error', err),
          })
      })
    },
    // 课程信息查询
    selectCourseData () {
      this.$axios
        .get('/Order/getUserCourseData', {
          params: {
            uid: this.uid.id,
            cid: this.courstData.id
          }
        })
        .then((res) => {
          if (res.data.data.code === 200) {
            this.courseData = res.data.data.data
          }
          this.loading = false // 加载圈绑定
        })
        .catch(() => {
        // this.myMessage('error', err),
        })
    },
    local (rows) {
      this.$router.push({
        path: '/Purchasecourses',
        query: {
          roid: JSON.stringify(rows)
        }
      })
      window.location.reload()
    },
    // 精品课
    classicCourse () {
      this.$axios
        .post('/clsaaicCourse/randonClsaaicFour')
        .then((res) => {
          this.classicCourseList = res.data.data
        })
    },
    paymentpage (row) {
      this.$router.push({
        path: '/Confirm',
        query: {
          roid: JSON.stringify(row)
        }
      })
    },
    vippage (row) {
      this.$router.push({
        path: '/VipCenter',
        query: {
          roid: JSON.stringify(row)
        }
      })
    }
  }
}
</script>

<style scoped>
    .div1{
        width: 100%;
        height: 14660px;
        background: rgb(247, 247, 247);
    }
    .span1{
        font-size: 25px;
        padding-left: 15px;
    }
    .span2{
        font-size: 15px;
        padding-left: 15px;
    }
    .span3{
        font-size: 30px;
        padding-left: 15px;
    }
    .span4{
        font-size: 15px;
        padding-left: 15px;
        color: rgb(241, 36, 36);/* 字体颜色 */
    }
    .span5{
        font-size: 15px;
        padding-left: 15px;
        color: rgb(61, 60, 60);/* 字体颜色 */
    }
    .span6{
        font-size: 15px;
        margin-right:80%;
        padding-left: 15px;
        color: rgb(61, 60, 60);/* 字体颜色 */
    }
    .ellipse-button1 {
        width: 285px; /* 调整按钮的宽度 */
        height: 35px; /* 调整按钮的高度 */
        border-radius: 50px; /* 使用 50% 的圆角半径来创建椭圆形 */
        background-color: rgb(247, 233, 242); /* 背景颜色 */
        color: #fcd7d7; /* 文本颜色 */
        font-size: 16px; /* 文本大小 */
        border: none; /* 移除边框 */
    }
    .ellipse-button3 {
        width: 260px; /* 调整按钮的宽度 */
        height: 25px; /* 调整按钮的高度 */
        border-radius: 50px; /* 使用 50% 的圆角半径来创建椭圆形 */
        background-color: rgb(248, 188, 109); /* 背景颜色 */
        color: #fcd7d7; /* 文本颜色 */
        font-size: 16px; /* 文本大小 */
        border: none; /* 移除边框 */
    }
    .ellipse-button4 {
        margin-right: 2%;
        width: 150px; /* 调整按钮的宽度 */
        height: 40px; /* 调整按钮的高度 */
        background-color: rgb(255, 165, 0); /* 背景颜色 */
        color: #ffffff; /* 文本颜色 */
        font-size: 20px; /* 文本大小 */
        border: none; /* 移除边框 */
    }
    .ellipse-button5 {
        margin-right: 2%;
        width: 150px; /* 调整按钮的宽度 */
        height: 40px; /* 调整按钮的高度 */
        background-color: rgb(255, 255, 255); /* 背景颜色 */
        color: #292828; /* 文本颜色 */
        font-size: 20px; /* 文本大小 */
    }
    .img1{
        width: 450px;
        height: 250px;
    }
    .div4{
        width: 920px;
        height: 13440px;
        background: rgb(255, 255, 255)
    }
    .div3{
        width: 95%;
        height: 275px;
        background: rgb(255, 255, 255);
        margin-left: 2%;
        margin-top: -4.6%;
    }
    .div2{
        width: 1200px;
        height: 14660px;
        margin: 0 auto;
        background: rgb(247, 247, 247);;
    }
    .el-dialog__header {
    padding: 1px 1px 1px;
}
    .el-button:focus, .el-button:hover {
    color: #19CAAD;
    border-color: #19CAAD;
    background-color: #fafafa;
    }
    .tiaozhuan:hover{
      cursor: pointer;
    }
</style>
